<template>
  <a-drawer
    :maskClosable="true"
    width="80%"
    placement="right"
    :closable="false"
    @close="handleCancel"
    :destroyOnClose="true"
    :visible="visible"
    style="padding: 0px"
  >
    <!-- 头部信息 -->
    <div class="device-header" style="height: 20px">
      <div class="device-info" style="margin-left: 2%">
        <div class="device-status">
          <!--待派单状态显示按钮【派单、撤回报修、接单、关闭、撤回、删除】 -->
          <!--待接修状态显示按钮【派单、转派、撤回报修、关闭、撤回、删除、完成报修】 -->
          <!--维修中状态显示按钮【联系外修、指派、暂停、关闭、删除、完成维修】 -->
          <!--暂停状态显示按钮【继续维修、关闭、删除】 -->
          <!--待验收状态显示按钮【验收、删除】 -->
          <!--已关闭状态显示按钮【评价工单、删除】 -->
          <!--已撤回状态显示按钮【删除】 -->
          <a-button
            v-if="
              deviceInfo.workOrderStatus == '0' ||
              deviceInfo.workOrderStatus == '1'
            "
            type="primary"
            @click="handleDispatch('0')"
            style="width: 80px; font-size: 12px; height: 25px"
            >派单</a-button
          >

          <a-button
            v-if="deviceInfo.workOrderStatus == '1'"
            type="primary"
            @click="handleDispatch('1')"
            style="width: 80px; font-size: 12px; height: 25px"
            >转派</a-button
          >

          <a-button
            v-if="
              deviceInfo.workOrderStatus == '0' ||
              deviceInfo.workOrderStatus == '1'
            "
            @click="handleWithdrawRepairReport"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            >撤回报修</a-button
          >

          <a-button
            v-if="deviceInfo.workOrderStatus == '0'"
            @click="handleReceivingOrder"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            >接单</a-button
          >

          <a-button
            v-if="deviceInfo.workOrderStatus == '3'"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            @click="handleStartOrder"
            >继续维修</a-button
          >
          <a-button
            v-if="deviceInfo.workOrderStatus == '2'"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            @click="handleContactExternalRepair"
            >联系外修</a-button
          >

          <a-button
            v-if="deviceInfo.workOrderStatus == '2'"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            @click="handleAssign"
            >指派</a-button
          >
          <a-button
            v-if="deviceInfo.workOrderStatus == '2'"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            @click="handleStopOrder"
            >暂停</a-button
          >
          <a-button
            v-if="
              deviceInfo.workOrderStatus == '0' ||
              deviceInfo.workOrderStatus == '1' ||
              deviceInfo.workOrderStatus == '2' ||
              deviceInfo.workOrderStatus == '3'
            "
            @click="handleClose"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            >关闭</a-button
          >

          <a-button
            v-if="
              deviceInfo.workOrderStatus == '0' ||
              deviceInfo.workOrderStatus == '1'
            "
            @click="handleWithdrawal"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            >撤回</a-button
          >
          <a-button
            v-if="deviceInfo.workOrderStatus == '5'"
            @click="handleEvaluate"
            type="primary"
            style="width: 80px; font-size: 12px; height: 25px"
            >评价工单</a-button
          >
          <a-button
            type="primary"
            @click="handleDelete"
            danger
            style="
              width: 80px;
              font-size: 12px;
              height: 25px;
              color: #ffffff;
              background-color: #ff4d4f;
              border: 1px solid #ff4d4f;
            "
            >删除</a-button
          >

          <a-button
            v-if="
              deviceInfo.workOrderStatus == '1' ||
              deviceInfo.workOrderStatus == '2'
            "
            type="primary"
            @click="handleCompleteRepairs"
            style="width: 80px; font-size: 12px; height: 25px"
            >完成维修</a-button
          >
          <a-button
            v-if="deviceInfo.workOrderStatus == '4'"
            type="primary"
            @click="handleCheckAccept"
            style="width: 80px; font-size: 12px; height: 25px"
            >验收</a-button
          >
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 管理信息表单 -->
      <div class="workOrderInformation-form">
        <!-- 管理信息模块 -->
        <div class="info-module" style="margin-top: 25px">
          <div class="module-header">
            <div class="module-title">工单信息</div>
            <div class="module-actions">
              <a
                v-if="!workOrderInformationEditable"
                @click="workOrderInformationEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="workOrderInformationEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="workOrderInformationCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="workOrderInformationEditable"
                type="primary"
                @click="workOrderInformationSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content" style="margin-left: 66px">
            <a-form-model
              layout="horizontal"
              ref="ruleForm"
              :model="workOrderInformation"
              :label-col="$global.labelCol"
              :wrapper-col="$global.wrapperCol"
            >
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="工单编号：" prop="workOrderNumber">
                    <span class="span-line-height" style="font-size: 15px">{{
                      deviceInfo.workOrderNumber
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="工单来源：">
                    <a-select
                      style="font-size: 15px"
                      v-if="workOrderInformationEditable"
                      v-model="workOrderInformation.workOrderSource"
                      :disabled="!workOrderInformationEditable"
                      placeholder="请选择工单来源"
                      class="my-select"
                      @change="forceUpdate"
                    >
                      <a-select-option
                        v-for="item in this.$sysDictOptions('workOrderSource')"
                        :key="item.k"
                        :value="item.k"
                      >
                        {{ item.v }}
                      </a-select-option>
                    </a-select>
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!workOrderInformationEditable"
                      >{{
                        getDictName(
                          deviceInfo.workOrderSource,
                          'workOrderSource'
                        )
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="是否返修：">
                    <a-radio-group
                      class="span-line-height"
                      style="font-size: 15px"
                      v-model="workOrderInformation.isRepair"
                      :disabled="!workOrderInformationEditable"
                      v-if="workOrderInformationEditable"
                    >
                      <a-radio value="0">否</a-radio>
                      <a-radio value="1">是</a-radio>
                    </a-radio-group>
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!workOrderInformationEditable"
                      >{{
                        deviceInfo.isRepair == null
                          ? '--'
                          : deviceInfo.isRepair == '0'
                          ? '否'
                          : '是'
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-model-item
                    label="内修/外修："
                    prop="internalExternalRepair"
                  >
                    <a-select
                      v-if="workOrderInformationEditable"
                      v-model="workOrderInformation.internalExternalRepair"
                      :disabled="!workOrderInformationEditable"
                      placeholder="请选择内修/外修"
                      class="my-select"
                      @change="forceUpdate"
                      style="font-size: 15px"
                    >
                      <a-select-option
                        v-for="item in this.$sysDictOptions(
                          'internalExternalRepair'
                        )"
                        :key="item.k"
                        :value="item.k"
                      >
                        {{ item.v }}
                      </a-select-option>
                    </a-select>
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!workOrderInformationEditable"
                      >{{
                        getDictName(
                          deviceInfo.internalExternalRepair,
                          'internalExternalRepair'
                        )
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="负责人：">
                    <a-select
                      style="font-size: 15px"
                      v-if="workOrderInformationEditable"
                      v-model="workOrderInformation.internalMaintenanceManager"
                      :disabled="!workOrderInformationEditable"
                      placeholder="请选择内修负责人"
                      class="my-select"
                      @change="forceUpdate"
                      mode="multiple"
                    >
                      <a-select-option
                        v-for="item in createByList"
                        :key="item.companyId + ''"
                        :value="item.companyId + ''"
                      >
                        {{ item.companyName }}
                      </a-select-option>
                    </a-select>
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!workOrderInformationEditable"
                      >{{ deviceInfo.internalMaintenanceManagerNames }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>

              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="响应时长：">
                    <span class="span-line-height" style="font-size: 15px">{{
                      deviceInfo.responseTime || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="维修时长：" style="font-size: 15px">
                    <span class="span-line-height">{{
                      deviceInfo.maintenanceDuration || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="维修周期:" style="font-size: 15px">
                    <span class="span-line-height">{{
                      deviceInfo.maintenanceCycle || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </div>
      </div>

      <!-- 基础信息表单 -->
      <div class="workOrderInformation-form">
        <!-- 基础信息模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">操作历史</div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row v-for="item in operationsList">
                <a-col :span="5">
                  <a-form-model-item>
                    <span class="span-line-height">{{
                      getCreateTime(item.createTime) || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <span class="span-line-height">{{
                      getCreateByName(item.createBy)
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4">
                  <a-form-model-item>
                    <span class="span-line-height">{{
                      item.operContent || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="10">
                  <a-form-model-item>
                    <span class="span-line-height">{{
                      item.remark || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 进度条表单 -->
      <div class="workOrderInformation-form">
        <!-- 进度条模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title"></div>
          </div>
          <div class="form-content" style="margin-top: 15px">
            <a-steps v-model="current" size="small">
              <a-step title="待派单" />
              <a-step title="待接修" />
              <a-step title="维修中" />
              <a-step title="待验收" />
              <a-step title="已关闭" />
            </a-steps>
          </div>
        </div>
      </div>

      <!-- 报修信息表单 -->
      <div class="workOrderInformation-form" style="margin-bottom: 10%">
        <!-- 报修信息模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">报修信息</div>
            <div class="module-actions">
              <a
                v-if="!repairInformationEditable"
                @click="repairInformationEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="repairInformationEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="repairInformationCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="repairInformationEditable"
                type="primary"
                @click="repairInformationSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="报修时间："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <span class="span-line-height" style="font-size: 15px">{{
                      deviceInfo.createTime
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="报修地点："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                  >
                    <a-cascader
                      style="font-size: 15px"
                      v-if="repairInformationEditable"
                      v-model="repairInformation.repairLocations"
                      :options="campusBuildingFloorRoomTree"
                      :change-on-select="false"
                      expand-trigger="click"
                      placeholder="请选择报修地点"
                      @change="forceUpdate"
                    ></a-cascader>
                    <span
                      class="span-line-height"
                      v-if="!repairInformationEditable"
                      >{{ deviceInfo.repairLocationNames || '--' }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      style="font-size: 15px"
                      :disabled="!repairInformationEditable"
                      v-model="repairInformation.repairAddress"
                      placeholder="请输入详细地址"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>

              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="报修人："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                  >
                    <a-select
                      style="font-size: 15px"
                      v-if="repairInformationEditable"
                      :showArrow="true"
                      :allowClear="true"
                      v-model="repairInformation.repairerId"
                      placeholder="请选择报修人"
                      @change="forceUpdate"
                    >
                      <a-select-option
                        v-for="item in createByList"
                        :key="item.companyId"
                        :value="item.companyId"
                      >
                        {{ item.companyName }}
                      </a-select-option>
                    </a-select>
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!repairInformationEditable"
                      >{{
                        getCreateByName(deviceInfo.repairerId) || '--'
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      style="font-size: 15px"
                      :disabled="!repairInformationEditable"
                      v-model="repairInformation.repairerPhone"
                      placeholder="请输入报修人手机号"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>

              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="报修科室："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                  >
                    <a-tree-select
                      v-if="repairInformationEditable"
                      v-model="repairInformation.repairDepartmentIds"
                      style="width: 100%; font-size: 15px"
                      :treeCheckStrictly="true"
                      allow-clear
                      :tree-data="departmentTree"
                      placeholder="请选择报修科室"
                      @change="forceUpdate"
                    />
                    <span
                      class="span-line-height"
                      style="font-size: 15px"
                      v-if="!repairInformationEditable"
                      >{{ deviceInfo.repairDepartmentNames || '--' }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 设备信息表单 -->
      <div class="workOrderInformation-form" style="margin-top: -5%">
        <!-- 设备信息模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">设备信息</div>
            <div style="margin-left: 20px">
              <div
                v-if="archiveEquipment.activeState == '3'"
                class="device-status-style"
                style="background: #fff1f0; color: #f04764; border: 1px solid"
              >
                故障停机
              </div>

              <div
                v-if="archiveEquipment.activeState == '0'"
                class="device-status-style"
                style="color: #1ba035; border: 1px solid"
              >
                使用中
              </div>
              <div
                v-if="archiveEquipment.activeState == '1'"
                class="device-status-style"
                style="background: #fafafa; color: #aeaeae; border: 1px solid"
              >
                待机
              </div>
            </div>
          </div>

          <div class="device-card">
            <div class="device-info">
              <div class="info-item1">
                <div style="display: inline">
                  {{ archiveEquipment.deviceShortCode }}
                </div>
                <div style="margin-left: 20px; display: inline">
                  {{ archiveEquipment.deviceName }}
                </div>
              </div>
              <div class="info-item2">
                <div style="display: inline">使用科室:</div>
                <div style="margin-left: 4px; display: inline">
                  {{ archiveEquipment.usingDepartmentIdNames }}
                </div>
                <div style="margin-left: 20px; display: inline">当前位置:</div>
                <div style="margin-left: 4px; display: inline">
                  {{ archiveEquipment.currentLocationNames }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 故障描述表单 -->
      <div class="workOrderInformation-form">
        <!-- 故障描述模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">故障描述</div>
            <div class="module-actions">
              <a
                v-if="!faultDescriptionEditable"
                @click="faultDescriptionEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="faultDescriptionEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="faultDescriptionCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="faultDescriptionEditable"
                type="primary"
                @click="faultDescriptionSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="紧急度："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                  >
                    <a-radio-group
                      v-model="faultDescription.urgency"
                      style="line-height: 35px"
                      v-if="faultDescriptionEditable"
                    >
                      <a-radio
                        v-for="item in this.$sysDictOptions('urgency')"
                        :key="item.k"
                        :value="item.k"
                        >{{ item.v }}</a-radio
                      >
                    </a-radio-group>
                    <span
                      class="span-line-height"
                      v-if="!faultDescriptionEditable"
                      >{{ getDictName(deviceInfo.urgency, 'urgency') }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="故障现象："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-tree-select
                      v-if="faultDescriptionEditable"
                      v-model="faultDescription.faultPhenomenons"
                      style="width: 100%"
                      tree-checkable
                      :treeCheckStrictly="true"
                      allow-clear
                      :tree-data="faultPhenomenonTree"
                      placeholder="与[故障说明]至少填一项"
                      @change="forceUpdate"
                    />

                    <span
                      class="span-line-height"
                      v-if="!faultDescriptionEditable"
                      >{{ deviceInfo.faultPhenomenonNames || '--' }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="故障说明："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      v-if="faultDescriptionEditable"
                      type="textarea"
                      v-model="faultDescription.faultDescription"
                      :disabled="!faultDescriptionEditable"
                      placeholder="与[故障现象]至少填一项"
                    ></a-input>
                    <span
                      class="span-line-height"
                      v-if="!faultDescriptionEditable"
                      >{{ deviceInfo.faultDescription }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="语音描述："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <span class="span-line-height">{{
                      deviceInfo.phoneticDescription
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="照片："
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <w-image-upload
                      :disabled="!faultDescriptionEditable"
                      class="avatar-uploader"
                      text="上传"
                      :multipleFlag="true"
                      v-model="faultDescription.image"
                      bizPath="electronicSignature"
                    ></w-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 维修内容表单 -->
      <div class="workOrderInformation-form">
        <!-- 维修内容模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">维修内容</div>
            <div class="module-actions">
              <a
                v-if="!repairContentEditable"
                @click="repairContentEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="repairContentEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="repairContentCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="repairContentEditable"
                type="primary"
                @click="repairContentSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="维修方式："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-radio-group
                      v-model="repairContent.maintenanceMethod"
                      style="line-height: 35px"
                      v-if="repairContentEditable"
                    >
                      <a-radio
                        v-for="item in this.$sysDictOptions(
                          'maintenanceMethod'
                        )"
                        :key="item.k"
                        :value="item.k"
                        >{{ item.v }}</a-radio
                      >
                    </a-radio-group>
                    <span
                      class="span-line-height"
                      v-if="!repairContentEditable"
                      >{{
                        getDictName(
                          deviceInfo.maintenanceMethod,
                          'maintenanceMethod'
                        )
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="维修级别："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-radio-group
                      v-model="repairContent.maintenanceLevel"
                      style="line-height: 35px"
                      v-if="repairContentEditable"
                    >
                      <a-radio
                        v-for="item in this.$sysDictOptions('maintenanceLevel')"
                        :key="item.k"
                        :value="item.k"
                        >{{ item.v }}</a-radio
                      >
                    </a-radio-group>
                    <span
                      class="span-line-height"
                      v-if="!repairContentEditable"
                      >{{
                        getDictName(
                          deviceInfo.maintenanceLevel,
                          'maintenanceLevel'
                        )
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="故障类型："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-tree-select
                      v-if="repairContentEditable"
                      v-model:value="repairContent.faultTypes"
                      style="min-width: 160px"
                      :tree-data="faultTypeTree"
                      tree-checkable
                      :treeCheckStrictly="true"
                      allow-clear
                      placeholder="请选择故障类型"
                      @change="forceUpdate"
                    />
                    <span
                      v-if="!repairContentEditable"
                      class="span-line-height"
                      >{{ deviceInfo.faultTypeNames }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="故障原因："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-tree-select
                      v-if="repairContentEditable"
                      v-model:value="repairContent.reasonMalfunctions"
                      style="min-width: 160px"
                      :tree-data="reasonMalfunctionTree"
                      tree-checkable
                      :treeCheckStrictly="true"
                      allow-clear
                      placeholder="请选择故障原因"
                      @change="forceUpdate"
                    />
                    <span
                      v-if="!repairContentEditable"
                      class="span-line-height"
                      >{{ deviceInfo.reasonMalfunctionNames }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="预计完成时间："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-date-picker
                      v-if="repairContentEditable"
                      v-model="repairContent.expectedCompletionTime"
                      inputReadOnly
                      type="date"
                      show-time
                      format="YYYY-MM-DD HH:mm:ss"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择预计完成时间"
                      style="width: 100%"
                      @change="expectedCompletionTimeChange"
                    />
                    <span
                      class="span-line-height"
                      v-if="!repairContentEditable"
                      >{{ deviceInfo.expectedCompletionTime }}</span
                    >
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="维修描述："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      v-if="repairContentEditable"
                      type="textarea"
                      v-model="repairContent.repairDescription"
                      placeholder="文字描述"
                    ></a-input>
                    <span
                      class="span-line-height"
                      v-if="!repairContentEditable"
                      >{{ deviceInfo.repairDescription }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    label="维修照片："
                  >
                    <w-image-upload
                      :disabled="!repairContentEditable"
                      class="avatar-uploader"
                      text="上传"
                      :multipleFlag="true"
                      v-model="repairContent.repairPictureImage"
                      bizPath="electronicSignature"
                    ></w-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 预估费用表单 -->
      <div class="workOrderInformation-form">
        <!-- 预估费用模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">预估费用</div>
            <div class="module-actions">
              <a
                v-if="!estimatedCostEditable"
                @click="estimatedCostEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="estimatedCostEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="estimatedCostCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="estimatedCostEditable"
                type="primary"
                @click="estimatedCostSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="维修厂家："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="repairManufacturer"
                    :rules="$valid.required"
                  >
                    <a-input
                      :disabled="!estimatedCostEditable"
                      v-model="estimatedCost.repairManufacturer"
                      placeholder="请输入维修厂家"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="预估金额："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="$valid.required"
                  >
                    <a-input
                      type="number"
                      :min="0"
                      :disabled="!estimatedCostEditable"
                      v-model="estimatedCost.estimatedAmount"
                      placeholder="请输入预估金额"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="联系人："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      :disabled="!estimatedCostEditable"
                      v-model="estimatedCost.maintenanceContactPerson"
                      placeholder="请输入联系人"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="联系电话："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      :disabled="!estimatedCostEditable"
                      v-model="estimatedCost.maintenanceContactPhone"
                      placeholder="请输入联系电话"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="备注："
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 16 }"
                  >
                    <a-input
                      v-if="estimatedCostEditable"
                      type="textarea"
                      v-model="estimatedCost.estimatedRemarks"
                      placeholder="备注"
                    ></a-input>
                    <span
                      class="span-line-height"
                      v-if="!estimatedCostEditable"
                      >{{ deviceInfo.estimatedRemarks }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    label="附件："
                  >
                    <w-file-upload
                      class="avatar-uploader"
                      text="上传"
                      :pdfOnly="true"
                      :multipleFlag="false"
                      v-model="estimatedCost.estimatedFile"
                      bizPath="annexUrl"
                    >
                    </w-file-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 16 }"
                    label="照片："
                  >
                    <w-image-upload
                      :disabled="!estimatedCostEditable"
                      class="avatar-uploader"
                      text="上传"
                      :multipleFlag="true"
                      v-model="estimatedCost.estimatedImage"
                      bizPath="electronicSignature"
                    ></w-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-table
                :columns="maintenanceCostsColumns"
                :dataSource="maintenanceCostsList"
                :pagination="false"
                bordered
                size="middle"
                rowKey="key"
              >
                <!-- 自定义单元格渲染 - 可编辑单元格 v-for="(row, index) in data" -->
                <template
                  v-for="col in editableMaintenanceCostsColumns"
                  :slot="col.dataIndex"
                  slot-scope="text, record, index"
                >
                  <div :key="col.dataIndex" class="editable-cell">
                    <span v-if="!estimatedCostEditable">
                      {{
                        col.dataIndex == 'type'
                          ? getDictName(text, 'estimatedCostType')
                          : text
                      }}
                    </span>
                    <span v-else>
                      <span v-if="col.dataIndex == 'type'">
                        <a-select
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          v-model="record[col.dataIndex]"
                          placeholder="请选择类型"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                          @change="forceUpdate"
                        >
                          <a-select-option
                            v-for="item in estimatedCostTypeList"
                            :value="item.k"
                          >
                            {{ item.v }}</a-select-option
                          >
                        </a-select>
                      </span>
                      <span
                        v-else-if="
                          col.dataIndex == 'warrantyPeriod' ||
                          col.dataIndex == 'price' ||
                          col.dataIndex == 'number'
                        "
                      >
                        <a-input
                          type="number"
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          @change="
                            estimatedCostInputChange(
                              record,
                              col.dataIndex,
                              index
                            )
                          "
                          v-model="record[col.dataIndex]"
                          :min="0"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>

                      <span
                        v-else-if="
                          col.dataIndex == 'name' ||
                          col.dataIndex == 'specificationModel'
                        "
                      >
                        <a-input
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          @change="
                            estimatedCostInputChange(
                              record,
                              col.dataIndex,
                              index
                            )
                          "
                          v-model="record[col.dataIndex]"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>
                      <span v-else>{{ text }} </span>
                    </span>

                    <div
                      class="error-message"
                      v-if="record.errors && record.errors[col.dataIndex]"
                    >
                      {{ record.errors[col.dataIndex] }}
                    </div>
                  </div>
                </template>

                <!-- 操作列 - 添加/删除行按钮 -->
                <template slot="action" slot-scope="text, record, index">
                  <a
                    v-if="estimatedCostEditable"
                    @click="removeMaintenanceCostsRow(index)"
                    style="color: red; font-size: 12px"
                  >
                    <a-icon type="delete" />移除</a
                  >
                </template>

                <!-- 表头添加必填标识 -->
                <template slot="typeTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="nameTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="specificationModelTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="warrantyPeriodTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="priceTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="numberTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="subtotalTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
              </a-table>

              <div
                class="table-footer"
                style="margin-top: 10px"
                v-if="estimatedCostEditable"
              >
                <a
                  @click="
                    addMaintenanceCostsRow(maintenanceCostsList.length - 1)
                  "
                >
                  <a-icon type="plus" />新增一项费用</a
                >
              </div>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 实际费用表单 -->
      <div class="workOrderInformation-form">
        <!-- 实际费用模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">实际费用</div>
            <div class="module-actions">
              <a
                v-if="!maintenanceActualCostEditable"
                @click="maintenanceActualCostEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="maintenanceActualCostEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="maintenanceActualCostCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="maintenanceActualCostEditable"
                type="primary"
                @click="maintenanceActualCostSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-table
                :columns="maintenanceActualCostColumns"
                :dataSource="maintenanceActualCostList"
                :pagination="false"
                bordered
                size="middle"
                rowKey="key"
              >
                <!-- 自定义单元格渲染 - 可编辑单元格 v-for="(row, index) in data" -->
                <template
                  v-for="col in editableMaintenanceActualCostColumns"
                  :slot="col.dataIndex"
                  slot-scope="text, record, index"
                >
                  <div :key="col.dataIndex" class="editable-cell">
                    <span v-if="!maintenanceActualCostEditable">
                      {{
                        col.dataIndex == 'type'
                          ? getDictName(text, 'estimatedCostType')
                          : col.dataIndex == 'orderTime' ||
                            col.dataIndex == 'arrivalTime'
                          ? getCreateTime(text)
                          : text
                      }}
                    </span>
                    <span v-else>
                      <span v-if="col.dataIndex == 'type'">
                        <a-select
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          v-model="record[col.dataIndex]"
                          placeholder="请选择类型"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                          @change="forceUpdate"
                        >
                          <a-select-option
                            v-for="item in estimatedCostTypeList"
                            :value="item.k"
                          >
                            {{ item.v }}</a-select-option
                          >
                        </a-select>
                      </span>
                      <span
                        v-else-if="
                          col.dataIndex == 'price' || col.dataIndex == 'number'
                        "
                      >
                        <a-input
                          type="number"
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          @change="
                            maintenanceActualCostInputChange(
                              record,
                              col.dataIndex,
                              index
                            )
                          "
                          v-model="record[col.dataIndex]"
                          :min="0"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>

                      <span v-else-if="col.dataIndex == 'name'">
                        <a-input
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          @change="
                            maintenanceActualCostInputChange(
                              record,
                              col.dataIndex,
                              index
                            )
                          "
                          v-model="record[col.dataIndex]"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>
                      <span
                        v-else-if="
                          col.dataIndex == 'orderTime' ||
                          col.dataIndex == 'arrivalTime'
                        "
                      >
                        <a-date-picker
                          @blur="
                            validateEstimatedCostField(record, col.dataIndex)
                          "
                          @change="
                            maintenanceActualCostDateChange(
                              record,
                              col.dataIndex,
                              index
                            )
                          "
                          v-model="record[col.dataIndex]"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                          inputReadOnly
                          type="date"
                          show-time
                          format="YYYY-MM-DD HH:mm:ss"
                          valueFormat="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择采购日期"
                          style="width: 100%"
                        />
                      </span>
                      <span v-else>{{ text }} </span>
                    </span>

                    <div
                      class="error-message"
                      v-if="record.errors && record.errors[col.dataIndex]"
                    >
                      {{ record.errors[col.dataIndex] }}
                    </div>
                  </div>
                </template>

                <!-- 操作列 - 添加/删除行按钮 -->
                <template slot="action" slot-scope="text, record, index">
                  <a
                    v-if="maintenanceActualCostEditable"
                    @click="removeMaintenanceActualCostRow(index)"
                    style="color: red; font-size: 12px"
                  >
                    <a-icon type="delete" />移除</a
                  >
                </template>

                <!-- 表头添加必填标识 -->
                <template slot="typeTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="nameTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>

                <template slot="priceTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="numberTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="totalMoneylTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
              </a-table>

              <div
                class="table-footer"
                style="margin-top: 10px"
                v-if="maintenanceActualCostEditable"
              >
                <a
                  @click="
                    addMaintenanceActualCostRow(
                      maintenanceActualCostList.length - 1
                    )
                  "
                >
                  <a-icon type="plus" />新增一项费用</a
                >
              </div>
              <div class="table-footer" style="margin-top: 25px">
                <a-row>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 4 }"
                      :wrapper-col="{ span: 16 }"
                      label="合计金额"
                      :rules="$valid.required"
                    >
                      <a-input
                        :disabled="!maintenanceActualCostEditable"
                        v-model="maintenanceActualCost.amountTotal"
                        placeholder="请输入合计金额"
                      ></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </div>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 发票表单 -->
      <div class="workOrderInformation-form">
        <!-- 发票模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">发票</div>
            <div class="module-actions">
              <a
                v-if="!invoiceEditable"
                @click="invoiceEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="invoiceEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="invoiceCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="invoiceEditable"
                type="primary"
                @click="invoiceSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-table
                :columns="invoiceColumns"
                :dataSource="invoiceList"
                :pagination="false"
                bordered
                size="middle"
                rowKey="key"
              >
                <!-- 自定义单元格渲染 - 可编辑单元格 v-for="(row, index) in data" -->
                <template
                  v-for="col in editableInvoiceColumns"
                  :slot="col.dataIndex"
                  slot-scope="text, record, index"
                >
                  <div :key="col.dataIndex" class="editable-cell">
                    <span v-if="!invoiceEditable">
                      {{
                        col.dataIndex == 'invoiceType'
                          ? getDictName(text, 'invoiceType')
                          : text
                      }}
                    </span>
                    <span v-else>
                      <span v-if="col.dataIndex == 'invoiceType'">
                        <a-select
                          @blur="validateInvoiceField(record, col.dataIndex)"
                          v-model="record[col.dataIndex]"
                          placeholder="请选择发票类型"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                          @change="forceUpdate"
                        >
                          <a-select-option
                            v-for="item in invoiceTypeList"
                            :value="item.k"
                          >
                            {{ item.v }}</a-select-option
                          >
                        </a-select>
                      </span>
                      <span v-else-if="col.dataIndex == 'invoiceAmount'">
                        <a-input
                          type="number"
                          @blur="validateInvoiceField(record, col.dataIndex)"
                          v-model="record[col.dataIndex]"
                          :min="0"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>

                      <span
                        v-else-if="
                          col.dataIndex == 'invoiceCode' ||
                          col.dataIndex == 'invoiceNumber' ||
                          col.dataIndex == 'checkCode'
                        "
                      >
                        <a-input
                          @blur="validateInvoiceField(record, col.dataIndex)"
                          v-model="record[col.dataIndex]"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                        />
                      </span>
                      <span v-else-if="col.dataIndex == 'invoiceDate'">
                        <a-date-picker
                          @blur="validateInvoiceField(record, col.dataIndex)"
                          v-model="record[col.dataIndex]"
                          :class="{
                            'error-field':
                              record.errors && record.errors[col.dataIndex],
                          }"
                          inputReadOnly
                          type="date"
                          format="YYYY-MM-DD"
                          valueFormat="YYYY-MM-DD"
                          placeholder="请选择开票日期"
                          style="width: 100%"
                        />
                      </span>
                      <span v-else>{{ text }} </span>
                    </span>

                    <div
                      class="error-message"
                      v-if="record.errors && record.errors[col.dataIndex]"
                    >
                      {{ record.errors[col.dataIndex] }}
                    </div>
                  </div>
                </template>

                <!-- 操作列 - 添加/删除行按钮 -->
                <template slot="action" slot-scope="text, record, index">
                  <a
                    v-if="invoiceEditable"
                    @click="removeInvoiceRow(index)"
                    style="color: red; font-size: 12px"
                  >
                    <a-icon type="delete" />移除</a
                  >
                </template>

                <!-- 表头添加必填标识 -->
                <template slot="invoiceTypeTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="invoiceCodeTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>

                <template slot="invoiceNumberTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="invoiceAmountTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="invoiceDatelTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
                <template slot="checkCodelTitle" slot-scope="title">
                  <span class="required-label">*</span>{{ title }}
                </template>
              </a-table>

              <div
                class="table-footer"
                style="margin-top: 10px"
                v-if="invoiceEditable"
              >
                <a @click="addInvoiceRow(invoiceList.length - 1)">
                  <a-icon type="plus" />添加发票</a
                >
              </div>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 维修结果表单 -->
      <div class="workOrderInformation-form" v-if="deviceInfo.repairResults">
        <!-- 维修结果模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">维修结果</div>
            <div class="module-actions">
              <a
                v-if="!repairResultsEditable"
                @click="repairResultsEditModule()"
                v-wx-role="101302"
              >
                <a-icon type="edit"
              /></a>
              <a-button
                v-if="repairResultsEditable"
                style="
                  font-size: 12px;
                  width: 40px;
                  background: #ffffff;
                  color: #f04764;
                  border: 1px solid;
                "
                @click="repairResultsCancelEdit()"
                >取消</a-button
              >
              <a-button
                style="font-size: 12px; width: 40px"
                v-if="repairResultsEditable"
                type="primary"
                @click="repairResultsSaveModule()"
                >保存</a-button
              >
            </div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="维修结果："
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="repairResults"
                  >
                    <a-radio-group
                      v-if="repairResultsEditable"
                      v-model="completeRepairs.repairResults"
                      style="line-height: 35px"
                    >
                      <a-radio
                        v-for="item in this.$sysDictOptions('repairResults')"
                        :key="item.k"
                        :value="item.k"
                        >{{ item.v }}</a-radio
                      >
                    </a-radio-group>
                    <span
                      class="span-line-height"
                      v-if="!repairResultsEditable"
                      >{{
                        getDictName(deviceInfo.repairResults, 'repairResults')
                      }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="维修人："
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="closeRemarks"
                  >
                    <span class="span-line-height">
                      {{ getCreateByName(deviceInfo.maintenanceManager) }}
                    </span>
                  </a-form-model-item>
                </a-col>
              </a-row>

              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="repairDescription"
                    label="备注："
                  >
                    <a-input
                      v-if="repairResultsEditable"
                      type="textarea"
                      v-model="completeRepairs.repairDescription"
                      placeholder="文字描述"
                    ></a-input>
                    <span
                      class="span-line-height"
                      v-if="!repairResultsEditable"
                      >{{ completeRepairs.repairDescription }}</span
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="附件"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="repairPictureFile"
                  >
                    <w-file-upload
                      :disabled="!repairResultsEditable"
                      class="avatar-uploader"
                      text="上传"
                      :pdfOnly="true"
                      :multipleFlag="false"
                      v-model="completeRepairs.repairPictureFile"
                      bizPath="annexUrl"
                    >
                    </w-file-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="repairDescription"
                    label="照片"
                  >
                    <w-image-upload
                      :disabled="!repairResultsEditable"
                      class="avatar-uploader"
                      text="上传"
                      :multipleFlag="true"
                      v-model="completeRepairs.repairPictureImage"
                      bizPath="electronicSignature"
                    ></w-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="signature"
                    label="签名"
                  >
                    <a-button
                      style="
                        width: 80px;
                        height: 23px;
                        line-height: 11px;
                        margin-top: 9px;
                        font-size: 11px;
                        border: 1px solid rgb(23, 144, 255);
                        color: rgb(23, 144, 255);
                      "
                      ><a-icon type="edit" />添加签名</a-button
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 验收结果表单 -->
      <div
        class="workOrderInformation-form"
        v-if="deviceInfo.checkAcceptResult"
      >
        <!-- 维修结果模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">验收结果</div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="验收结果："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="checkAcceptResult"
                  >
                    <span class="span-line-height">{{
                      deviceInfo.checkAcceptResult == '0' ? '不通过' : '通过'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="验收人："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="checkAcceptResult"
                  >
                    <span class="span-line-height">{{
                      getCreateByName(deviceInfo.acceptancePersonnel)
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    label="验收时间："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="checkAcceptResult"
                  >
                    <span class="span-line-height">{{
                      getCreateTime(deviceInfo.acceptanceTime)
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="签名："
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="checkAcceptResult"
                  >
                    <a-button
                      style="
                        width: 80px;
                        height: 23px;
                        line-height: 11px;
                        margin-top: 9px;
                        font-size: 11px;
                        border: 1px solid rgb(23, 144, 255);
                        color: rgb(23, 144, 255);
                      "
                      ><a-icon type="edit" />添加签名</a-button
                    >
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" v-if="deviceInfo.checkAcceptResult == '0'">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="checkAcceptRemarks"
                    label="不通过原因："
                  >
                    <span class="span-line-height">{{
                      deviceInfo.checkAcceptRemarks
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>

      <!-- 评价结果表单 -->
      <div class="workOrderInformation-form" v-if="deviceInfo.evaluateResults">
        <!-- 评价结果模块 -->
        <div class="info-module">
          <div class="module-header">
            <div class="module-title">评价结果</div>
          </div>
          <div class="form-content">
            <a-form layout="horizontal">
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    label="评价结果："
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="evaluateResults"
                  >
                    <div style="margin: 10px 2px">
                      <span>工程师到场响应速度</span>
                      <a-rate
                        disabled
                        v-model="deviceInfo.rate1"
                        allow-half
                        style="margin-left: 12%; color: #f5a623"
                      />
                      {{ deviceInfo.rate1 }}
                    </div>
                    <div style="margin: 10px 2px">
                      <span>工程师技术水平和维修效率</span>
                      <a-rate
                        v-model="deviceInfo.rate2"
                        allow-half
                        disabled
                        style="margin-left: 5%; color: #f5a623"
                      />
                      {{ deviceInfo.rate2 }}
                    </div>
                    <div style="margin: 10px 2px">
                      <span>维修结果整体满意度</span>
                      <a-rate
                        v-model="deviceInfo.rate3"
                        allow-half
                        disabled
                        style="margin-left: 12%; color: #f5a623"
                      />
                      {{ deviceInfo.rate3 }}
                    </div>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="evaluationContent"
                    label="评价人:"
                  >
                    <span class="span-line-height">{{
                      deviceInfo.isAnonymous == 'true'
                        ? getCreateByName(deviceInfo.evaluator)
                        : '匿名评价'
                    }}</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="10">
                  <a-form-model-item
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    prop="evaluatorTime"
                    label="评价时间:"
                  >
                    <span class="span-line-height">{{
                      getCreateTime(deviceInfo.evaluatorTime)
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    prop="evaluationContent"
                    label="评价内容"
                  >
                    <span class="span-line-height">{{
                      deviceInfo.evaluationContent || '--'
                    }}</span>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row
                :gutter="24"
                style="margin-left: 19%; margin-right: -12px; margin-top: 10px"
              >
                <a-col>
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 16 }"
                    prop="evaluateImage"
                  >
                    <w-image-upload
                      disabled="true"
                      class="avatar-uploader"
                      text="上传"
                      :multipleFlag="true"
                      v-model="deviceInfo.evaluateImage"
                      bizPath="electronicSignature"
                    ></w-image-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
    </div>

    <!-- 评价工单 -->
    <a-modal
      :width="700"
      :visible="evaluateVisible"
      @ok="handleEvaluateSubmit"
      @cancel="handleEvaluateClose"
      cancelText="关闭"
      title="评价工单"
    >
      <a-spin :spinning="confirmLoading">
        <a-form layout="horizontal">
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="评价结果："
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="evaluateResults"
              >
                <div style="margin: 10px 2px">
                  <span>工程师到场响应速度</span>
                  <a-rate
                    v-model="evaluate.rate1"
                    allow-half
                    style="margin-left: 12%; color: #f5a623"
                  />
                </div>
                <div style="margin: 10px 2px">
                  <span>工程师技术水平和维修效率</span>
                  <a-rate
                    v-model="evaluate.rate2"
                    allow-half
                    style="margin-left: 2%; color: #f5a623"
                  />
                </div>
                <div style="margin: 10px 2px">
                  <span>维修结果整体满意度</span>
                  <a-rate
                    v-model="evaluate.rate3"
                    allow-half
                    style="margin-left: 12%; color: #f5a623"
                  />
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="evaluationContent"
                label="描述"
              >
                <a-input
                  type="textarea"
                  style="height: 160px; margin-top: 10px"
                  v-model="evaluate.evaluationContent"
                  placeholder="文字描述"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row
            :gutter="24"
            style="margin-left: 19%; margin-right: -12px; margin-top: 10px"
          >
            <a-col>
              <a-form-model-item
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 16 }"
                prop="evaluateImage"
              >
                <w-image-upload
                  class="avatar-uploader"
                  text="上传"
                  :multipleFlag="true"
                  v-model="evaluate.evaluateImage"
                  bizPath="electronicSignature"
                ></w-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row
            :gutter="24"
            style="margin-left: 19%; margin-right: -12px; margin-top: 10px"
          >
            <a-col>
              <a-form-model-item
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 16 }"
                prop="signature"
              >
                <a-checkbox v-model="evaluate.isAnonymous">匿名评价</a-checkbox>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
    <!-- 完成工单 -->
    <a-modal
      :width="700"
      :visible="completeRepairsVisible"
      @ok="handleCompleteRepairsSubmit"
      @cancel="handleCompleteRepairsClose"
      cancelText="关闭"
      title="完成工单"
    >
      <a-spin :spinning="confirmLoading">
        <a-form layout="horizontal">
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="维修结果："
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="repairResults"
              >
                <a-radio-group
                  v-model="completeRepairs.repairResults"
                  style="line-height: 35px"
                >
                  <a-radio
                    v-for="item in this.$sysDictOptions('repairResults')"
                    :key="item.k"
                    :value="item.k"
                    >{{ item.v }}</a-radio
                  >
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="维修人："
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="closeRemarks"
              >
                <span class="span-line-height">
                  {{ getCreateByName(deviceInfo.maintenanceManager) }}
                </span>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="isStandbyMode"
                label="将设备设为待机状态："
              >
                <a-radio-group
                  v-model="completeRepairs.isStandbyMode"
                  style="line-height: 35px"
                >
                  <a-radio value="0">否</a-radio>
                  <a-radio value="1">是</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="repairDescription"
                label="备注："
              >
                <a-input
                  type="textarea"
                  v-model="completeRepairs.repairDescription"
                  placeholder="文字描述"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="附件"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="repairPictureFile"
              >
                <w-file-upload
                  class="avatar-uploader"
                  text="上传"
                  :pdfOnly="true"
                  :multipleFlag="false"
                  v-model="completeRepairs.repairPictureFile"
                  bizPath="annexUrl"
                >
                </w-file-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="repairDescription"
                label="照片"
              >
                <w-image-upload
                  class="avatar-uploader"
                  text="上传"
                  :multipleFlag="true"
                  v-model="completeRepairs.repairPictureImage"
                  bizPath="electronicSignature"
                ></w-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="signature"
                label="签名"
              >
                <a-button
                  style="
                    width: 80px;
                    height: 23px;
                    line-height: 11px;
                    margin-top: 9px;
                    font-size: 11px;
                    border: 1px solid rgb(23, 144, 255);
                    color: rgb(23, 144, 255);
                  "
                  ><a-icon type="edit" />添加签名</a-button
                >
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
    <!-- 指派 -->
    <a-modal
      :width="700"
      :visible="assignVisible"
      @ok="handleAssignSubmit"
      @cancel="handleAssignClose"
      cancelText="关闭"
      title="指派"
    >
      <a-spin :spinning="confirmLoading">
        <a-form layout="horizontal">
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="维修负责人："
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="maintenanceManager"
                :rules="$valid.required"
              >
                <a-select
                  v-model="assign.internalMaintenanceManager"
                  placeholder="被指派的人员将成为维修负责人"
                  mode="multiple"
                >
                  <a-select-option
                    v-for="item in createByList"
                    :key="item.companyId + ''"
                    :value="item.companyId + ''"
                  >
                    {{ item.companyName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
    <!-- 联系外修 -->
    <a-modal
      :width="700"
      :visible="contactExternalRepairVisible"
      @ok="handleContactExternalRepairSubmit"
      @cancel="handleContactExternalRepairClose"
      cancelText="关闭"
      title="联系外修"
    >
      <a-spin :spinning="confirmLoading">
        <a-form layout="horizontal">
          <a-row :gutter="24">
            <a-col>
              <a-form-model-item
                label="维修商："
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 16 }"
                prop="repairerSupplierId"
                :rules="$valid.required"
              >
                <a-select
                  v-model="contactExternalRepair.repairerSupplierId"
                  placeholder="请选择维修商"
                >
                  <a-select-option
                    v-for="item in supplierList"
                    :value="item.id"
                  >
                    {{ item.companyName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
    <!-- 派单/转派 -->
    <dispatch-form ref="dispatchFormRef" @close="ok"></dispatch-form>
    <!-- 暂停工单 -->
    <stop-order-form ref="stopOrderFormRef" @close="ok"></stop-order-form>
    <!-- 关闭工单 -->
    <close-form ref="closeFormRef" @close="ok"></close-form>
    <!-- 撤回工单 -->
    <withdrawal-form ref="withdrawalFormRef" @close="ok"></withdrawal-form>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { getDepartTree, getCompanyList } from '@/api/api'
import WImageUpload from '@/components/WxImageUpload/WImageUpload'
import WFileUpload from '@/components/WxFileUpload/WFileUpload.vue'
import DispatchForm from './components/DispatchForm.vue'
import StopOrderForm from './components/StopOrderForm.vue'
import CloseForm from './components/CloseForm.vue'
import WithdrawalForm from './components/WithdrawalForm.vue'
export default {
  name: 'DevArchiveEquipmentEdit',
  components: {
    WImageUpload,
    WFileUpload,
    DispatchForm,
    StopOrderForm,
    CloseForm,
    WithdrawalForm,
  },
  computed: {
    editableInvoiceColumns() {
      return this.invoiceColumns.filter((col) => col.dataIndex !== 'action')
    },
    // 检查是否有错误
    hasInvoiceErrors() {
      return this.invoiceList.some(
        (row) => row.errors && Object.keys(row.errors).length > 0
      )
    },

    maintenanceActualCostTotalSum() {
      return this.maintenanceActualCostList.reduce(
        (sum, item) => parseFloat(sum) + parseFloat(item.totalMoney),
        0
      )
    },

    editableMaintenanceActualCostColumns() {
      return this.maintenanceActualCostColumns.filter(
        (col) => col.dataIndex !== 'action'
      )
    },
    // 检查是否有错误
    hasMaintenanceActualCostErrors() {
      return this.maintenanceActualCostList.some(
        (row) => row.errors && Object.keys(row.errors).length > 0
      )
    },

    editableMaintenanceCostsColumns() {
      return this.maintenanceCostsColumns.filter(
        (col) => col.dataIndex !== 'action'
      )
    },
    // 检查是否有错误
    hasMaintenanceCostsErrors() {
      return this.maintenanceCostsList.some(
        (row) => row.errors && Object.keys(row.errors).length > 0
      )
    },
  },
  data() {
    return {
      confirmLoading: false,
      campusBuildingFloorRoomTree: [],
      departmentTree: [],
      workGroupTree: [],

      completeRepairsVisible: false,
      dispatchVisible: false,
      contactExternalRepairVisible: false,
      assignVisible: false,
      evaluateVisible: false,

      completeRepairs: {
        id: undefined,
        repairResults: undefined,
        maintenanceManager: undefined,
        repairDescription: undefined,
        repairPictureImage: undefined,
        repairPictureFile: undefined,
        signature: undefined,
        workOrderStatus: undefined,
      },
      dispatch: {
        id: undefined,
        workGroup: undefined,
        maintenanceManager: undefined,
        dispatchRemarks: undefined,
      },
      contactExternalRepair: {
        ids: undefined,
        repairerSupplierId: undefined,
      },
      assign: {
        ids: undefined,
        internalMaintenanceManager: undefined,
      },

      evaluate: {
        id: undefined,
        rate1: undefined,
        rate2: undefined,
        rate3: undefined,
        evaluationContent: undefined,
        evaluateImage: undefined,
        isAnonymous: 'false',
      },
      // 设备基本信息
      deviceInfo: {
        deviceShortCode: undefined,
        deviceName: undefined,
        activeState: undefined,
        repairState: undefined,
        inputPerson: undefined,
        entryDate: undefined,
        qrCodeBase64: undefined,
      },

      // 工单信息数据
      workOrderInformation: {
        id: undefined,
        workOrderNumber: undefined,
        workOrderSource: undefined,
        isRepair: undefined,
        internalExternalRepair: undefined,
        internalMaintenanceManager: undefined,
      },
      operationsList: [
        {
          remark: undefined,
          createTime: undefined,
          createBy: undefined,
        },
      ],
      current: 0,
      // 报修信息数据
      repairInformation: {
        id: undefined,
        createTime: undefined,
        repairLocations: undefined,
        repairAddress: undefined,
        repairDepartmentIds: undefined,
        repairerId: undefined,
        repairerPhone: undefined,
      },
      archiveEquipment: {
        id: undefined,
      },
      originalLedger: {
        id: undefined,
        primaryDeviceName: undefined,
        primaryBind: undefined,
        primaryModel: undefined,
        manufacturer: undefined,
      },
      faultTypeTree: [],
      reasonMalfunctionTree: [],
      faultPhenomenonTree: [],
      maintenanceCostsColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          width: 100,
          scopedSlots: {
            customRender: 'type',
            title: 'typeTitle',
          },
        },
        {
          title: '名称',
          dataIndex: 'name',
          width: 100,
          scopedSlots: {
            customRender: 'name',
            title: 'nameTitle',
          },
        },
        {
          title: '规格',
          width: 100,
          dataIndex: 'specificationModel',
          scopedSlots: {
            customRender: 'specificationModel',
            title: 'specificationModelTitle',
          },
        },
        {
          title: '质保期',
          width: 100,
          dataIndex: 'warrantyPeriod',
          scopedSlots: {
            customRender: 'warrantyPeriod',
            title: 'warrantyPeriodTitle',
          },
        },
        {
          title: '单价(元)',
          width: 100,
          dataIndex: 'price',
          scopedSlots: {
            customRender: 'price',
            title: 'priceTitle',
          },
        },
        {
          title: '数量',
          width: 100,
          dataIndex: 'number',
          scopedSlots: {
            customRender: 'number',
            title: 'numberTitle',
          },
        },
        {
          title: '小计',
          width: 100,
          dataIndex: 'subtotal',
          scopedSlots: {
            customRender: 'subtotal',
            title: 'subtotalTitle',
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '10%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      maintenanceCostsList: [],
      maintenanceActualCostColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          width: 100,
          scopedSlots: {
            customRender: 'type',
            title: 'typeTitle',
          },
        },
        {
          title: '名称',
          dataIndex: 'name',
          width: 100,
          scopedSlots: {
            customRender: 'name',
            title: 'nameTitle',
          },
        },

        {
          title: '单价(元)',
          width: 100,
          dataIndex: 'price',
          scopedSlots: {
            customRender: 'price',
            title: 'priceTitle',
          },
        },
        {
          title: '数量',
          width: 100,
          dataIndex: 'number',
          scopedSlots: {
            customRender: 'number',
            title: 'numberTitle',
          },
        },
        {
          title: '总金额',
          width: 100,
          dataIndex: 'totalMoney',
          scopedSlots: {
            customRender: 'totalMoney',
            title: 'totalMoneyTitle',
          },
        },
        {
          title: '下单时间',
          width: 100,
          dataIndex: 'orderTime',
          scopedSlots: {
            customRender: 'orderTime',
          },
        },
        {
          title: '到场时间',
          width: 100,
          dataIndex: 'arrivalTime',
          scopedSlots: {
            customRender: 'arrivalTime',
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '10%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      maintenanceActualCostList: [],

      invoiceColumns: [
        {
          title: '发票类型',
          dataIndex: 'invoiceType',
          width: 100,
          scopedSlots: {
            customRender: 'invoiceType',
            title: 'invoiceTypeTitle',
          },
        },
        {
          title: '发票代码',
          dataIndex: 'invoiceCode',
          width: 100,
          scopedSlots: {
            customRender: 'invoiceCode',
            title: 'invoiceCodeTitle',
          },
        },
        {
          title: '发票号码',
          width: 100,
          dataIndex: 'invoiceNumber',
          scopedSlots: {
            customRender: 'invoiceNumber',
            title: 'invoiceNumberTitle',
          },
        },
        {
          title: '开票日期',
          width: 100,
          dataIndex: 'invoiceDate',
          scopedSlots: {
            customRender: 'invoiceDate',
            title: 'invoiceDateTitle',
          },
        },
        {
          title: '开票金额',
          width: 100,
          dataIndex: 'invoiceAmount',
          scopedSlots: {
            customRender: 'invoiceAmount',
            title: 'invoiceAmountTitle',
          },
        },
        {
          title: '校验码',
          width: 100,
          dataIndex: 'checkCode',
          scopedSlots: {
            customRender: 'checkCode',
            title: 'checkCodeTitle',
          },
        },

        {
          title: '操作',
          dataIndex: 'action',
          width: '10%',
          scopedSlots: { customRender: 'action' },
        },
      ],
      invoiceList: [],
      faultDescription: {
        id: undefined,
        urgency: undefined,
        faultPhenomenons: undefined,
        faultDescription: undefined,
        phoneticDescription: undefined,
        image: undefined,
      },
      repairContent: {
        id: undefined,
        maintenanceMethod: undefined,
        faultTypes: undefined,
        reasonMalfunctions: undefined,
        maintenanceLevel: undefined,
        expectedCompletionTime: undefined,
        repairDescription: undefined,
        repairPictureImage: undefined,
      },

      estimatedCost: {
        id: undefined,
        repairManufacturer: undefined,
        maintenanceContactPerson: undefined,
        maintenanceContactPhone: undefined,
        estimatedAmount: undefined,
        estimatedRemarks: undefined,
        estimatedFile: undefined,
        estimatedImage: undefined,
      },
      maintenanceActualCost: {
        id: undefined,
        amountTotal: undefined,
      },
      depreciationInformation: {
        id: undefined,
        periodDepreciation: undefined,
        residualValueRate: undefined,
        netWorth: undefined,
        residualValue: undefined,
      },
      url: {
        getFaultPhenomenonTree: '/system/devMaintenanceFaultPhenomenon/tree',
        getArchiveEquipmentList: '/system/devArchiveEquipment/info',
        saveInfo: '/system/devMaintenance/save',
        getInfo: '/system/devMaintenance/info',
        delete: '/system/devMaintenance/delete',
        update: '/system/devMaintenance/update',
        getCampusBuildingFloorRoomTree:
          '/system/devCampusBuildingFloorRoom/listTree',
        saveWorkOrderInformation:
          '/system/devMaintenance/saveWorkOrderInformation',
        saveRepairInformation: '/system/devMaintenance/saveRepairInformation',
        saveFaultDescription: '/system/devMaintenance/saveFaultDescription',
        saveRepairContent: '/system/devMaintenance/saveRepairContent',
        saveEstimatedCost: '/system/devMaintenance/saveEstimatedCost',
        saveMaintenanceCompleteRepairs:
          '/system/devMaintenance/saveMaintenanceCompleteRepairs',
        saveMaintenanceActualCost:
          '/system/devMaintenance/saveMaintenanceActualCost',
        saveMaintenanceInvoice: '/system/devMaintenance/saveMaintenanceInvoice',
        saveEvaluate: '/system/devMaintenance/saveEvaluate',
        getReasonMalfunctionTree:
          '/system/devMaintenanceReasonMalfunction/tree',
        getWorkGroupTree: '/system/devMaintenanceWorkGroup/tree',
        getSupplierList: '/system/devSupplier/getList',
      },
      // 编辑状态
      workOrderInformationEditable: false,

      repairInformationEditable: false,
      faultDescriptionEditable: false,
      repairContentEditable: false,
      repairResultsEditable: false,
      estimatedCostEditable: false,
      maintenanceActualCostEditable: false,
      invoiceEditable: false,
      visible: false,
      formInfo: {},
      createByList: [],
      estimatedCostTypeList: [],
      invoiceTypeList: [],
      supplierList: [],
    }
  },
  created() {
    this.getUserList()
    this.getCampusBuildingFloorRoom()
    //使用科室
    this.getDepartment()
    //故障现象
    this.getFaultPhenomenon()
    //故障类型
    this.getFaultType()
    //故障原因
    this.getReasonMalfunction()
    this.getEstimatedCostType()
    this.getinvoiceType()
    this.getWorkGroup()
    this.getSupplierList()
  },
  methods: {
    //供应商列表
    getSupplierList() {
      getAction(this.url.getSupplierList).then((res) => {
        this.supplierList = res.result.data
      })
    },
    forceUpdate() {
      this.$forceUpdate()
    },
    //START 发票

    //发票类型
    getinvoiceType() {
      this.invoiceTypeList = this.$sysDictOptions('invoiceType')
    },

    // 添加新行
    addInvoiceRow(index) {
      if (this.hasInvoiceErrors) return
      var indexOf = index + 1
      console.log('indexOf+1>>', indexOf + 1)

      this.invoiceList.splice(indexOf, 0, {
        key: Date.now().toString(),
        invoiceType: undefined,
        invoiceCode: undefined,
        invoiceNumber: undefined,
        invoiceAmount: undefined,
        invoiceDate: undefined,
        checkCode: undefined,
        errors: {},
      })
    },

    // 删除行
    removeInvoiceRow(index) {
      this.invoiceList.splice(index, 1)
    },

    invoiceInputChange(record, column, index) {
      if (record.price && record.number) {
        //付款比例转换为小数
        var totalMoney = parseFloat(record.price) * parseFloat(record.number)
        record.totalMoney = totalMoney
      }
    },

    invoiceDateChange(record, column, index) {
      console.log('record>>', record)
    },

    // 验证字段
    validateInvoiceField(record, field) {
      // 清除旧错误
      if (record.errors && record.errors[field]) {
        this.$delete(record.errors, field)
      }

      // 必填校验规则
      const requiredFields = [
        'invoiceType',
        'invoiceCode',
        'invoiceNumber',
        'invoiceAmount',
        'invoiceDate',
        'checkCode',
      ]
      if (requiredFields.includes(field) && !record[field]) {
        this.$set(
          record.errors,
          field,
          `${this.getInvoiceFieldTitle(field)}不能为空`
        )
      }
    },

    // 获取字段标题
    getInvoiceFieldTitle(field) {
      const column = this.invoiceColumns.find((col) => col.dataIndex === field)
      return column ? column.title : field
    },

    //END 发票

    //START 实际费用
    getCurrentTime() {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    },
    // 添加新行
    addMaintenanceActualCostRow(index) {
      if (this.hasMaintenanceActualCostErrors) return
      var indexOf = index + 1
      console.log('indexOf+1>>', indexOf + 1)
      this.maintenanceActualCostList.splice(indexOf, 0, {
        key: Date.now().toString(),
        type: undefined,
        name: undefined,
        price: 0,
        number: 1,
        totalMoney: 0,
        orderTime: this.getCurrentTime(),
        arrivalTime: this.getCurrentTime(),
        errors: {},
      })
    },

    // 删除行
    removeMaintenanceActualCostRow(index) {
      this.maintenanceActualCostList.splice(index, 1)
    },

    maintenanceActualCostInputChange(record, column, index) {
      if (record.price && record.number) {
        //付款比例转换为小数
        var totalMoney = parseFloat(record.price) * parseFloat(record.number)
        record.totalMoney = totalMoney
      }
      this.maintenanceActualCost.amountTotal =
        this.maintenanceActualCostTotalSum
    },

    maintenanceActualCostDateChange(record, column, index) {
      console.log('record>>', record)
    },

    // 验证字段
    validateMaintenanceActualCostField(record, field) {
      // 清除旧错误
      if (record.errors && record.errors[field]) {
        this.$delete(record.errors, field)
      }

      // 必填校验规则
      const requiredFields = ['type', 'name', 'price', 'number', 'totalMoney']
      if (requiredFields.includes(field) && !record[field]) {
        this.$set(
          record.errors,
          field,
          `${this.getMaintenanceActualCostFieldTitle(field)}不能为空`
        )
      }
    },

    // 获取字段标题
    getMaintenanceActualCostFieldTitle(field) {
      const column = this.maintenanceActualCostColumns.find(
        (col) => col.dataIndex === field
      )
      return column ? column.title : field
    },

    //END 实际费用

    //START 费用
    getEstimatedCostType() {
      this.estimatedCostTypeList = this.$sysDictOptions('estimatedCostType')
    },

    // 添加新行
    addMaintenanceCostsRow(index) {
      if (this.hasMaintenanceCostsErrors) return
      var indexOf = index + 1
      console.log('indexOf+1>>', indexOf + 1)
      this.maintenanceCostsList.splice(indexOf, 0, {
        key: Date.now().toString(),
        type: undefined,
        name: undefined,
        specificationModel: undefined,
        warrantyPeriod: 0,
        price: 0,
        number: 1,
        subtotal: 0,
        errors: {},
      })
    },

    // 删除行
    removeMaintenanceCostsRow(index) {
      this.maintenanceCostsList.splice(index, 1)
    },

    estimatedCostInputChange(record, column, index) {
      if (record.price && record.number) {
        //付款比例转换为小数
        var subtotal = parseFloat(record.price) * parseFloat(record.number)
        record.subtotal = subtotal
      }
    },

    // 验证字段
    validateEstimatedCostField(record, field) {
      // 清除旧错误
      if (record.errors && record.errors[field]) {
        this.$delete(record.errors, field)
      }

      // 必填校验规则
      const requiredFields = [
        'type',
        'name',
        'specificationModel',
        'warrantyPeriod',
        'price',
        'number',
        'subtotal',
      ]
      if (requiredFields.includes(field) && !record[field]) {
        this.$set(
          record.errors,
          field,
          `${this.getEstimatedCostFieldTitle(field)}不能为空`
        )
      }
    },

    // 获取字段标题
    getEstimatedCostFieldTitle(field) {
      const column = this.maintenanceCostsColumns.find(
        (col) => col.dataIndex === field
      )
      return column ? column.title : field
    },

    //END 费用
    //故障原因
    getReasonMalfunction() {
      getAction(this.url.getReasonMalfunctionTree, {}).then((res) => {
        this.reasonMalfunctionTree = res.result.data
      })
    },
    //故障类型
    getFaultType() {
      getAction(this.url.getFaultPhenomenonTree, {}).then((res) => {
        this.faultTypeTree = res.result.data
      })
    },
    //故障现象
    getFaultPhenomenon() {
      getAction(this.url.getFaultPhenomenonTree, {}).then((res) => {
        this.faultPhenomenonTree = res.result.data
      })
    },
    getCreateTime(createTime) {
      if (createTime) {
        return createTime.replace('T', ' ')
      }
    },
    getDictName(value, dictType) {
      if (value) {
        var dictList = this.$sysDictOptions(dictType)
        return dictList[`wx${value}`].v
      }
      return '--'
    },

    expectedCompletionTimeChange(value, dateString) {
      this.repairContent.expectedCompletionTime = dateString
    },

    //位置
    getCampusBuildingFloorRoom() {
      getAction(this.url.getCampusBuildingFloorRoomTree).then((res) => {
        this.campusBuildingFloorRoomTree = res.result.data
      })
    },

    //使用科室
    getDepartment() {
      getDepartTree().then((res) => {
        this.departmentTree = res.result.data
      })
    },
    //工作组
    getWorkGroup() {
      getAction(this.url.getWorkGroupTree).then((res) => {
        this.workGroupTree = res.result.data
      })
    },

    getUserList() {
      // 加载数据方法 必须为 Promise 对象
      var parameter = { pageNo: 1, pageSize: 1000000 }
      getCompanyList(Object.assign(parameter, this.queryParam)).then((res) => {
        this.createByList = res.result.data.records
      })
    },
    getCreateByName(text) {
      var obj = this.createByList.filter(
        (aa) => aa.companyId + '' == text + ''
      )[0]
      if (obj == null) {
        if (text) {
          return '系统管理员'
        } else {
          return '--'
        }
      }
      return obj.companyName
    },

    //编辑
    workOrderInformationEditModule() {
      this.workOrderInformationEditable = true
      if (!this.workOrderInformation.internalExternalRepair) {
        this.workOrderInformation.internalExternalRepair = '0'
      }
      if (!this.workOrderInformation.workOrderSource) {
        this.workOrderInformation.workOrderSource = '5'
      }
    },
    // 取消编辑 - 将模块切换为只读模式
    workOrderInformationCancelEdit() {
      this.edit({ id: this.workOrderInformation.id })
      this.workOrderInformationEditable = false
    },

    // 保存模块数据
    workOrderInformationSaveModule() {
      if (this.workOrderInformation.internalMaintenanceManager) {
        this.workOrderInformation.internalMaintenanceManager =
          this.workOrderInformation.internalMaintenanceManager + ''
      }

      postAction(
        this.url.saveWorkOrderInformation,
        this.workOrderInformation
      ).then((res) => {
        if (res.code == '0000') {
          this.workOrderInformationEditable = false
          this.$message.success('工单信息保存成功')
          this.edit({ id: this.deviceInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },

    //编辑
    repairInformationEditModule() {
      this.repairInformationEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    repairInformationCancelEdit() {
      this.repairInformationEditable = false
      this.edit({ id: this.repairInformation.id })
    },

    // 保存模块数据
    repairInformationSaveModule() {
      //报修科室
      // if (this.repairInformation.repairDepartmentIds) {
      //   this.repairInformation.repairDepartmentId = JSON.stringify(
      //     this.repairInformation.repairDepartmentIds
      //   )
      // }
      //报修位置
      if (this.repairInformation.repairLocations) {
        this.repairInformation.repairLocation =
          this.repairInformation.repairLocations + ''
      }
      postAction(this.url.saveRepairInformation, this.repairInformation).then(
        (res) => {
          if (res.code == '0000') {
            this.repairInformationEditable = false
            this.$message.success('报修信息保存成功')
            this.edit({ id: this.deviceInfo.id })
          } else {
            this.$message.error(res.content)
          }
        }
      )
    },

    //编辑
    faultDescriptionEditModule() {
      this.faultDescriptionEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    faultDescriptionCancelEdit() {
      this.edit({ id: this.faultDescription.id })
      this.faultDescriptionEditable = false
    },

    // 保存模块数据
    faultDescriptionSaveModule() {
      //维修故障现象
      if (this.faultDescription.faultPhenomenons) {
        this.faultDescription.faultPhenomenon = JSON.stringify(
          this.faultDescription.faultPhenomenons
        )
      } else {
        if (!this.faultDescription.faultDescription) {
          this.$message.error('请选择故障现象或填写故障说明任意一项')

          return
        }
      }

      postAction(this.url.saveFaultDescription, this.faultDescription).then(
        (res) => {
          if (res.code == '0000') {
            this.faultDescriptionEditable = false
            this.$message.success('故障现象保存成功')

            this.edit({ id: this.faultDescription.id })
          } else {
            this.$message.error(res.content)
          }
        }
      )
    },

    //编辑
    repairContentEditModule() {
      this.repairContentEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    repairContentCancelEdit() {
      this.edit({ id: this.repairContent.id })
      this.repairContentEditable = false
    },

    // 保存模块数据
    repairContentSaveModule() {
      postAction(this.url.saveRepairContent, this.repairContent).then((res) => {
        if (res.code == '0000') {
          this.repairContentEditable = false
          this.$message.success('维修内容保存成功')

          this.edit({ id: this.formInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },

    //编辑
    repairResultsEditModule() {
      this.repairResultsEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    repairResultsCancelEdit() {
      this.edit({ id: this.repairResults.id })
      this.repairResultsEditable = false
    },

    // 保存模块数据
    repairResultsSaveModule() {
      postAction(
        this.url.saveMaintenanceCompleteRepairs,
        this.completeRepairs
      ).then((res) => {
        if (res.code == '0000') {
          this.repairResultsEditable = false
          this.$message.success('维修结果保存成功')

          this.edit({ id: this.formInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },

    //编辑
    estimatedCostEditModule() {
      this.estimatedCostEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    estimatedCostCancelEdit() {
      this.edit({ id: this.estimatedCost.id })
      this.estimatedCostEditable = false
    },

    // 保存模块数据
    estimatedCostSaveModule() {
      if (this.maintenanceCostsList) {
        this.estimatedCost.maintenanceCosts = JSON.stringify(
          this.maintenanceCostsList
        )
      }

      postAction(this.url.saveEstimatedCost, this.estimatedCost).then((res) => {
        if (res.code == '0000') {
          this.estimatedCostEditable = false
          this.$message.success('预估费用保存成功')

          this.edit({ id: this.formInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },

    //编辑
    maintenanceActualCostEditModule() {
      this.maintenanceActualCostEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    maintenanceActualCostCancelEdit() {
      this.edit({ id: this.formInfo.id })
      this.maintenanceActualCostEditable = false
    },

    // 保存模块数据
    maintenanceActualCostSaveModule() {
      if (this.maintenanceActualCostList) {
        this.maintenanceActualCost.maintenanceActualCosts = JSON.stringify(
          this.maintenanceActualCostList
        )
      }

      postAction(
        this.url.saveMaintenanceActualCost,
        this.maintenanceActualCost
      ).then((res) => {
        if (res.code == '0000') {
          this.estimatedCostEditable = false
          this.$message.success('实际费用保存成功')

          this.edit({ id: this.formInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },
    //编辑
    invoiceEditModule() {
      this.invoiceEditable = true
    },
    // 取消编辑 - 将模块切换为只读模式
    invoiceCancelEdit() {
      this.edit({ id: this.formInfo.id })
      this.invoiceEditable = false
    },

    // 保存模块数据
    invoiceSaveModule() {
      var invoiceObj = {
        id: this.formInfo.id,
        invoices: JSON.stringify(this.invoiceList),
      }
      postAction(this.url.saveMaintenanceInvoice, invoiceObj).then((res) => {
        if (res.code == '0000') {
          this.repairContentEditable = false
          this.$message.success('发票保存成功')

          this.edit({ id: this.formInfo.id })
        } else {
          this.$message.error(res.content)
        }
      })
    },
    add() {
      this.visible = true

      this.edit()
    },
    getArchiveEquipmentList(id) {
      getAction(this.url.getArchiveEquipmentList, { id: id }).then((res) => {
        this.archiveEquipment = res.result.data
      })
    },
    csh() {
      this.workOrderInformation = {}
      this.repairInformation = {}
      this.originalLedger = {}
      this.completeRepairs = {}
      this.maintenanceCostsList = []
      this.maintenanceActualCostList = []
      this.faultDescription = {}
      this.repairContent = {}
      this.estimatedCost = {}

      this.maintenanceActualCostEditable = false
      this.workOrderInformationEditable = false
      this.repairInformationEditable = false
      this.faultDescriptionEditable = false
      this.repairContentEditable = false
      this.estimatedCostEditable = false
      this.invoiceEditable = false
      this.repairResultsEditable = false
    },
    moment,
    edit(record) {
      this.$objToOverride(this.formInfo, record)
      this.csh()
      if (this.formInfo.id) {
        getAction(this.url.getInfo, { id: record.id }).then((res) => {
          this.$nextTick(() => {
            this.deviceInfo = res.result.data

            this.current = parseInt(this.deviceInfo.workOrderStatus)

            //关联设备
            this.getArchiveEquipmentList(this.deviceInfo.archiveEquipmentId)

            this.workOrderInformation = this.deviceInfo
            if (this.deviceInfo.internalMaintenanceManager) {
              var internalMaintenanceManager =
                this.deviceInfo.internalMaintenanceManager.split(',')

              this.workOrderInformation.internalMaintenanceManager =
                internalMaintenanceManager

              this.assign.internalMaintenanceManager =
                internalMaintenanceManager
            }

            //START报修信息
            var repairLocations = []
            if (this.deviceInfo.repairLocations) {
              repairLocations = this.deviceInfo.repairLocations.split(',')
            }

            this.repairInformation = {
              id: this.formInfo.id,
              repairAddress: this.deviceInfo.repairAddress,
              repairerId: this.deviceInfo.repairerId,
              repairerPhone: this.deviceInfo.repairerPhone,
              repairDepartmentIds: this.deviceInfo.repairDepartmentId,
              repairLocations: repairLocations,
            }
            console.log('this.repairInformation>>', this.repairInformation)
            //END报修信息

            //START 故障描述
            var faultPhenomenonList = []
            if (this.deviceInfo.faultPhenomenon) {
              var faultPhenomenons = this.deviceInfo.faultPhenomenon.split(',')

              faultPhenomenons.forEach((faultPhenomenon) => {
                faultPhenomenonList.push({
                  value: faultPhenomenon,
                })
              })
            }

            this.faultDescription = {
              id: this.deviceInfo.id,
              urgency: this.deviceInfo.urgency,
              faultPhenomenons: faultPhenomenonList,
              faultDescription: this.deviceInfo.faultDescription,
              phoneticDescription: this.deviceInfo.phoneticDescription,
              image: this.deviceInfo.image,
            }
            //END 故障描述

            //START维修内容
            var faultTypeList = []
            if (this.deviceInfo.faultType) {
              var faultTypes = this.deviceInfo.faultType.split(',')

              faultTypes.forEach((faultType) => {
                faultTypeList.push({
                  value: faultType,
                })
              })
            }
            var reasonMalfunctionList = []

            if (this.deviceInfo.reasonMalfunction) {
              var reasonMalfunctions =
                this.deviceInfo.reasonMalfunction.split(',')

              reasonMalfunctions.forEach((reasonMalfunction) => {
                reasonMalfunctionList.push({
                  value: reasonMalfunction,
                })
              })
            }

            this.repairContent = {
              id: this.deviceInfo.id,
              maintenanceMethod: this.deviceInfo.id,
              faultTypes: faultTypeList,
              reasonMalfunctions: reasonMalfunctionList,
              maintenanceLevel: this.deviceInfo.maintenanceLevel,
              expectedCompletionTime: this.deviceInfo.expectedCompletionTime,
              repairDescription: this.deviceInfo.repairDescription,
              repairPictureImage: this.deviceInfo.repairPictureImage,
            }

            //END维修内容

            //START 费用预估
            this.estimatedCost = {
              id: this.deviceInfo.id,
              repairManufacturer: this.deviceInfo.repairManufacturer,
              maintenanceContactPerson:
                this.deviceInfo.maintenanceContactPerson,
              maintenanceContactPhone: this.deviceInfo.maintenanceContactPhone,
              estimatedAmount: this.deviceInfo.estimatedAmount,
              estimatedRemarks: this.deviceInfo.estimatedRemarks,
              estimatedFile: this.deviceInfo.estimatedFile,
              estimatedImage: this.deviceInfo.estimatedImage,
            }
            //END 费用预估

            //费用
            if (this.deviceInfo.maintenanceCosts) {
              this.maintenanceCostsList = JSON.parse(
                this.deviceInfo.maintenanceCosts
              )
              this.maintenanceCostsList.forEach((item) => {
                item.errors = {}
              })
            }
            //START 实际费用
            if (this.deviceInfo.maintenanceActualCost) {
              this.maintenanceActualCostList = JSON.parse(
                this.deviceInfo.maintenanceActualCost
              )
              this.maintenanceActualCostList.forEach((item) => {
                item.errors = {}
              })
            }

            this.maintenanceActualCost = {
              id: this.deviceInfo.id,
              amountTotal: this.deviceInfo.amountTotal,
            }
            //END 实际费用
            //发票
            if (this.deviceInfo.invoicess) {
              this.invoiceList = JSON.parse(this.deviceInfo.invoicess)
              this.invoiceList.forEach((item) => {
                item.errors = {}
              })
            }

            //完成维修记录
            this.completeRepairs = {
              id: this.deviceInfo.id,
              repairResults: this.deviceInfo.repairResults,
              maintenanceManager: this.deviceInfo.maintenanceManager,
              repairDescription: this.deviceInfo.repairDescription,
              repairPictureImage: this.deviceInfo.repairPictureImage,
              repairPictureFile: this.deviceInfo.repairPictureFile,
              signature: this.deviceInfo.signature,
              workOrderStatus: undefined,
            }

            if (this.deviceInfo.evaluateResults) {
              var evaluateResults = JSON.parse(this.deviceInfo.evaluateResults)
              this.deviceInfo.rate1 = evaluateResults.rate1
              this.deviceInfo.rate2 = evaluateResults.rate2
              this.deviceInfo.rate3 = evaluateResults.rate3
            }

            //操作记录
            if (this.deviceInfo.operations) {
              this.operationsList = JSON.parse(this.deviceInfo.operations)
            }
          })
        })
      }
      this.visible = true
    },
    // 确定
    handleSubmit() {
      // 触发表单验证
      this.confirmLoading = true
      this.$refs.ruleForm.validate((valid) => {
        console.log(valid)
        if (valid) {
          postAction(this.url.saveInfo, this.formInfo)
            .then((res) => {
              this.$message.success(res.content)
              this.$emit('ok', this.formInfo)
              this.close()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },

    //START 指派

    handleAssign() {
      this.assignVisible = true

      if (this.deviceInfo.internalMaintenanceManager) {
        this.assign.internalMaintenanceManager =
          this.deviceInfo.internalMaintenanceManager
      } else {
        this.assign = {}
      }
    },

    handleAssignSubmit() {
      if (this.assign.internalMaintenanceManager) {
        this.assign.internalMaintenanceManager =
          this.assign.internalMaintenanceManager + ''
      }
      this.assign.ids = this.deviceInfo.id
      this.assign.workOrderStatus = '-2'
      postAction(this.url.update, this.assign).then((resp) => {
        this.$message.success('指派成功')
        this.handleAssignClose()
      })
    },
    handleAssignClose() {
      this.assignVisible = false
      this.assign = {}
      this.edit({ id: this.deviceInfo.id })
    },
    //END 联系外修

    //START 联系外修

    handleContactExternalRepair() {
      this.contactExternalRepairVisible = true
      this.contactExternalRepair = {}
    },

    handleContactExternalRepairSubmit() {
      this.contactExternalRepair.ids = this.deviceInfo.id
      this.contactExternalRepair.workOrderStatus = '-1'
      postAction(this.url.update, this.contactExternalRepair).then((resp) => {
        this.$message.success('提交成功')
        this.handleContactExternalRepairClose()
      })
    },
    handleContactExternalRepairClose() {
      this.contactExternalRepairVisible = false
      this.contactExternalRepair = {}
      this.edit({ id: this.deviceInfo.id })
    },
    //END 联系外修
    //START 评价工单
    handleEvaluate() {
      this.evaluateVisible = true
      this.evaluate = {}
    },

    handleEvaluateSubmit() {
      if (!this.evaluate.isAnonymous) {
        this.evaluate.isAnonymous = false
      }
      if (this.evaluate.rate1 == null) {
        this.evaluate.rate1 = 0
      }
      if (this.evaluate.rate2 == null) {
        this.evaluate.rate2 = 0
      }
      if (this.evaluate.rate3 == null) {
        this.evaluate.rate3 = 0
      }
      var obj = {
        rate1: this.evaluate.rate1,
        rate2: this.evaluate.rate2,
        rate3: this.evaluate.rate3,
      }
      this.evaluate.evaluateResults = JSON.stringify(obj)
      this.evaluate.id = this.deviceInfo.id
      console.log('evaluate>>', this.evaluate)

      postAction(this.url.saveEvaluate, this.evaluate).then((resp) => {
        this.$message.success('工单评价完成')
        this.handleEvaluateClose()
      })
    },
    handleEvaluateClose() {
      this.evaluateVisible = false
      this.evaluate = {}
      this.edit({ id: this.deviceInfo.id })
    },
    //END 完成工单
    //开始维修
    handleStartOrder() {
      var receivingOrder = {
        ids: this.deviceInfo.id,
        workOrderStatus: '2',
      }
      var that = this
      this.$confirm({
        title: '确认继续维修?',
        content: '确认后维修将继续',
        onOk: function () {
          postAction(that.url.update, receivingOrder).then((resp) => {
            that.$message.success('操作成功')
            that.edit({ id: that.deviceInfo.id })
          })
        },
      })
    },

    //START 派单
    handleDispatch(dispatchType) {
      this.$nextTick(() => {
        this.$refs.dispatchFormRef.handleDispatch(
          dispatchType,
          this.formInfo.id
        )
      })
    },
    ok() {
      this.edit({ id: this.formInfo.id })
    },

    //END 派单
    //撤回报修
    handleWithdrawRepairReport() {
      var receivingOrder = {
        ids: this.deviceInfo.id,
        workOrderStatus: '6',
      }
      var that = this
      this.$confirm({
        title: '确认撤销报修?',
        content: '撤回报修后维修工单将被直接关闭',
        onOk: function () {
          postAction(that.url.update, receivingOrder).then((resp) => {
            that.$message.success('撤销报修成功')
            that.edit({ id: that.deviceInfo.id })
          })
        },
      })
    },
    //关闭工单
    handleClose() {
      this.$nextTick(() => {
        this.$refs.closeFormRef.handleClose(this.formInfo.id)
      })
    },
    //暂停
    handleStopOrder() {
      this.$refs.stopOrderFormRef.handleStopOrder(this.formInfo.id)
    },
    //接单
    handleReceivingOrder() {
      var receivingOrder = {
        ids: this.formInfo.id,
        workOrderStatus: '2',
      }
      var that = this
      this.$confirm({
        title: '确认接修?',
        content:
          '接修后，你将成为维修负责人，并可以填写维修信息、维修结果等信息',
        onOk: function () {
          postAction(that.url.update, receivingOrder).then((resp) => {
            that.$message.success('接修成功')
            that.edit({ id: that.formInfo.id })
          })
        },
      })
    },
    //START验收

    handleCheckAccept() {
      this.$nextTick(() => {
        this.$refs.checkAcceptFormRef.handleCheckAccept(this.formInfo.id)
      })
    },

    //END 验收
    //START 完成工单
    handleCompleteRepairs() {
      this.completeRepairsVisible = true
      this.completeRepairs = {}
    },

    handleCompleteRepairsSubmit() {
      this.completeRepairsVisible = true
      this.completeRepairs.workOrderStatus = '4'
      this.completeRepairs.ids = this.formInfo.id
      postAction(this.url.update, this.completeRepairs).then((resp) => {
        this.$message.success('工单完成维修')
        this.handleCompleteRepairsClose()
      })
    },
    handleCompleteRepairsClose() {
      this.completeRepairsVisible = false
      this.completeRepairs = {}
      this.edit({ id: this.formInfo.id })
    },
    //END 完成工单

    //START 撤回
    handleWithdrawal() {
      this.$nextTick(() => {
        this.$refs.withdrawalFormRef.handleWithdrawal(this.formInfo.id)
      })
    },

    //END 撤回
    // 删除
    handleDelete() {
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '确定要删除当前维修记录吗?',
        onOk: function () {
          deleteAction(that.url.delete, { ids: that.formInfo.id }).then(
            (resp) => {
              that.$message.success('删除成功')
              that.$emit('ok', '')
              that.close()
            }
          )
        },
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    editorOk(val) {
      this.formInfo.content = val
    },
  },
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  background-color: #f0f2f5;
  color: #333;
  padding: 20px;
}
.device-container {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.device-header {
  /* background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); */
  /* color: white; */
  /* padding: 16px 24px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.device-info {
  display: flex;
  align-items: center;
  gap: 24px;
}
.device-name {
  font-size: 21px;
  font-weight: 600;
}
.device-id {
  font-size: 18px;
}
.device-status {
  display: flex;
  gap: 16px;
  margin-top: 0px;
}
.status-tag {
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 12px;
  width: 50px;
  height: 25px;
  line-height: 14px;
}
.fault-status {
  background: #ff4d4f;
}
.no-warranty {
  background: #faad14;
}
.record-info {
  font-size: 14px;
  margin-left: 50%;
}

/* 标签页样式 */
.tabs-container {
  padding: 0 24px;
}
.ant-tabs-bar {
  margin-bottom: 0;
}
.ant-tabs-tab {
  padding: 16px 24px !important;
  font-size: 16px;
  font-weight: 500;
}

/* 内容区域 */
.content-wrapper {
  /* padding: 24px; */
  /* display: flex; */
}
.workOrderInformation-form {
  flex: 1;
  padding-right: 24px;
  margin: -1% 0px;
}
.industry-info {
  width: 400px;
  padding-left: 24px;
  overflow-y: auto;
}

/* 模块样式 */
.info-module {
  margin-bottom: 15px;
  /* background: #fafafa; */
  border-radius: 6px;
  /* border: 1px solid #e8e8e8; */
  overflow: hidden;
}
.module-header {
  padding: 12px 24px;
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.module-title {
  font-weight: 600;
  font-size: 16px;
}
.module-actions {
  display: flex;
  gap: 10px;
  margin-left: 15px;
}
.form-content {
  padding: 10px 24px;
}

/* 表单样式 */
.ant-form-item {
  margin-bottom: 18px;
}
.ant-form-item-label {
  padding-right: 10px;
}
.ant-form-item-label label {
  color: #595959;
}
.ant-input,
.ant-select-selector {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

/* 行业信息样式 */
.industry-card {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 24px;
}
.industry-card-header {
  background: #e6f7ff;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
}
.industry-card-title {
  font-weight: 600;
  color: #1890ff;
}
.industry-card-body {
  padding: 16px;
}
.industry-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f0f0f0;
}
.industry-item-title {
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}
.industry-item-value {
  color: #595959;
  padding-left: 12px;
}

.ant-input[disabled] {
  margin-top: 3px;
  background-color: #fff !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.65) !important;
  cursor: not-allowed;
}
.ant-input {
  padding-left: 5px;
}

.span-line-height {
  line-height: 38px;
}
.device-status-style {
  font-size: 11px;
  width: 60px;
  height: 23px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
}

.device-card {
  background: white;
  margin-top: -25px;
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  margin-left: 30px;
}

.btn-replace {
  color: #1890ff;
  border-color: #1890ff;
  width: 80px;
  font-size: 12px;
  height: 25px;
}

.btn-remove {
  color: #ff4d4f;
  border-color: #ff4d4f;
  width: 80px;
  font-size: 12px;
  height: 25px;
}

.device-id {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.device-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 8px 0;
  letter-spacing: 0.5px;
}

.device-model {
  background: #f0f7ff;
  padding: 8px 12px;
  border-radius: 6px;
  color: #1890ff;
  font-size: 15px;
  border-left: 3px solid #1890ff;
  margin: 15px 0;
}

.device-info {
  margin: 18px 28px;
  height: 90px;
  border-radius: 3px;
  display: grid;
}

.info-item1 {
  margin-top: 1%;
  margin-left: 15px;
  font-size: 12px;
  width: 100%;
}
.info-item2 {
  margin-top: -4%;
  margin-left: 15px;
  font-size: 12px;
  width: 100%;
}

.info-label {
  color: #606266;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #303133;
  font-weight: 500;
  flex: 1;
}

.error-field {
  border-color: #f5222d !important;
}

.error-message {
  color: #f5222d;
  font-size: 12px;
  margin-top: 2px;
}

.required-label {
  color: #f5222d;
  margin-right: 4px;
}
</style>
